<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.cpbh"
        placeholder="车票编号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <br />
      <el-input
        v-model="listQuery.tgpy"
        placeholder="退票金额"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>
    <el-table
      v-if="isShowSell"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="车票编号"
        prop="cpbh"
        align="center"
        width="80"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span>{{ row.cpbh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的站名" prop="mdcz" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.mdcz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="售票员" prop="spy" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.spy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="票价" align="center" prop="pj">
        <template slot-scope="{ row }">
          <span>{{ row.pj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车票状态" prop="cpzt" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.cpzt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检票状态" prop="sfjp" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.sfjp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退票金额" align="center" prop="tgpy">
        <template slot-scope="{ row }">
          <span>{{ row.tgpy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车票类型" prop="cplx" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.cplx }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="Actions"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            退票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="!isShowSell"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="车票编号"
        prop="cpbh"
        align="center"
        width="80"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span>{{ row.cpbh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的站名" prop="mdcz" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.mdcz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退票员" prop="spy" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.spy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="票价" align="center" prop="pj">
        <template slot-scope="{ row }">
          <span>{{ row.pj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退票金额" align="center" prop="tgpy">
        <template slot-scope="{ row }">
          <span>{{ row.tgpy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检票状态" prop="sfjp" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.sfjp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车票状态" prop="cpzt" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.cpzt }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 金额和张数 -->
    退票张数：<el-input
        v-model="tpzs"
        style="width: 200px"
        class="filter-item"
        disabled
      />
      总金额：<el-input
        v-model="zje"
        style="width: 200px"
        class="filter-item"
        disabled
      />
      退款金额<el-input
        v-model="tkje"
        style="width: 200px"
        class="filter-item"
        disabled
      />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <!-- <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:10px;">
        <el-form-item label="用户编号" prop="yhbh">
          <el-input v-if="dialogStatus != 'create'" v-model="temp.yhbh" readonly />
          <el-input v-else v-model="temp.yhbh" />
        </el-form-item>
      </el-form> -->
      <div>
        {{ this.str1 }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            sfjp == '未检' && cpzt == '正常' ? createData() : alert('拒绝退票')
          "
        >
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table
        :data="pvData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >Confirm</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { show_cpb_by_bbkh, cpb_tuipiao_py,cpb_tuipiao_by_cpzt } from "@/api/fuwu";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

const calendarTypeOptions = [
  { key: "CN", display_name: "China" },
  { key: "US", display_name: "USA" },
  { key: "JP", display_name: "Japan" },
  { key: "EU", display_name: "Eurozone" },
];

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      isShowSell: false,
      str1: "",
      yhmm: "",
      sfjp: "",
      cpzt: "",
      cpbh: "",
      pj: "",
      tpzs:"",
      zje:"",
      tkje:"",
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        order_by: "cpbh_asc",
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [
        { label: "ID Ascending", key: "+cpbh" },
        { label: "ID Descending", key: "-cpbh" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        id: undefined,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "创建",
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" },
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change",
          },
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" },
        ],
      },
      // downloadLoading: false,
    };
  },
  mounted() {
    // this.getList();
    this.cpb_tuipiao_by_cpzt_list();
    // this.zhangshu_sum();
  },
  computed: {
    ...mapGetters([
      'yhxm'
    ]),
    
  },
  methods: {
    getList() {
      this.listLoading = true;
      show_cpb_by_bbkh(this.listQuery).then((response) => {
        console.log(response);
        this.list = response.data.items;
        console.log("this.list", this.list);
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    cpb_tuipiao_by_cpzt_list() {
      this.listLoading = true;
      cpb_tuipiao_by_cpzt(this.yhxm).then((response) => {
        console.log(response);
        this.list = response.data.items;
        console.log("this.list", this.list);
        this.total = response.data.total;
        this.listLoading = false;
        this.zhangshu_sum()
      });
    },
    handleFilter() {
      this.isShowSell = true
      this.listQuery.page = 1;
      this.getList();
      console.log("run");
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success",
      });
      row.status = status;
    },
    sortChange(data) {
      //排序发生变化事件
      const { prop, order } = data;
      if (prop === "cpbh") {
        this.sortByCPBH(order);
      }
    },
    sortByCPBH(order) {
      //按用户编号排序
      let cur = this.listQuery.order_by.split("_");
      if (order === "ascending") {
        this.listQuery.order_by = cur[0] + "_" + "asc";
      } else {
        this.listQuery.order_by = cur[0] + "_" + "desc";
      }
      this.handleFilter();
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        status: "published",
        type: "",
      };
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    zhangshu_sum() { 
      var alist=this.list;
      console.log("length(alist)",alist.length)
      this.tpzs=alist.length
      var zongjine=0,zongtuikuan=0
      for (let i = 0; i < alist.length; i++) {
        zongjine=zongjine+alist[i].pj
        zongtuikuan=zongtuikuan+alist[i].tgpy
        }
        this.zje=zongjine
        this.tkje=zongtuikuan


    },
    createData() {
      // alert("开始退票")
      cpb_tuipiao_py(this.cpbh, this.pj,this.yhxm).then((response) => {
        // console.log("response",response)
        // console.log("pj",this.pj)
        this.dialogFormVisible = false;
        this.isShowSell = false
        this.listQuery.cpbh =""
        this.getList()
      });
      this.getList();
    },
    handleUpdate(row) {
      console.log(this.yhxm,"=====================")
      console.log("row_______", row);
      console.log("row2==_______", row["cpbh"]);
      console.log("row2==_______", row["sfjp"]);
      this.sfjp = row["sfjp"];
      this.cpzt = row["cpzt"];
      this.cpbh = row["cpbh"];
      this.pj = row["pj"];
      console.log("this.sfjp", this.sfjp);
      if (row["sfjp"] != "已检" && row["cpzt"] != "退票") {
        this.str1 = "是否确认退票";
        this.dialogFormVisible = true;
      } else {
        alert("车票已经检票或已经退票，不能退票");
      }
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      alert("拒绝退票");
    },
    handleFetchPv(pv) {
      fetchPv(pv).then((response) => {
        this.pvData = response.data.pvData;
        this.dialogPvVisible = true;
      });
    },
    // handleDownload() {
    //   this.downloadLoading = true
    //   import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
    //     const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
    //     const data = this.formatJson(filterVal)
    //     excel.export_json_to_excel({
    //       header: tHeader,
    //       data,
    //       filename: 'table-list'
    //     })
    //     this.downloadLoading = false
    //   })
    // },
    formatJson(filterVal) {
      return this.list.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>